<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>web作业2</title>
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./plugins/elementui/index.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body class="hold-transition">
<div id="app">
  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="video-title">📽️视频列表</span>
      </div>
      <div v-for="(video,index) in videoList" :key="index" class="text item">
        <el-button :autofocus="true" @click="changeVideo(video.id, video.name)">{{video.name}}</el-button>
      </div>
      <div v-for="(video,index) in videoList" :key="video.id" class="text item">
        <el-button :autofocus="true" @click="changeVideo(video.id, video.name)">{{video.name}}</el-button>
      </div>
    </el-card>

    <video id="video-choose"
           width="1000"
           height="560"
           controls
           preload="none"
           autoplay="autoplay"
           loop
           :src="videoURL">
    </video>

  </div>
</div>
</body>

<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
  let vue = new Vue({
    el: '#app',
    data() {
      return {
        videoId: '1',
        videoURL: 'http://localhost/videos/1',
        videoList: [],
      }
    },
    computed: {},

    created() {
      axios.get('/videos/all').then((res) => {
        this.videoList = res.data.data
      })
      this.reloadVideo()
    },

    methods: {
      changeVideo(id, VideoName) {
        this.videoURL = 'http://localhost/videos/' + id
        this.$message.success('欢迎观看"' + VideoName + '"')
        this.reloadVideo()
      },
      reloadVideo(){
        setTimeout(() => {
          document.getElementById('video-choose').contentWindow.location.reload(true);
          document.querySelector('video').play()
        }, 300)
      }
    },
  })

</script>

</html>